<template>
  <div class="chat-system-container">
    <!-- 左侧侧边栏 -->
    <div class="sidebar">
      <el-menu
        :default-active="activeMenuIndex"
        class="el-menu-vertical-demo"
        background-color="#2c2f33"
        text-color="#b9bbbe"
        active-text-color="#fff"
      >
        <el-menu-item index="1" @click="selectMenu('ChatPage')">
          <i class="el-icon-chat-dot-round"></i>
        </el-menu-item>
        <el-menu-item index="2" @click="selectMenu('FriendListPage')" >
          <i class="el-icon-user"></i>
        </el-menu-item>
        <!--  待开发      -->
        <el-menu-item index="3" @click="selectMenu('document')">
          <i class="el-icon-document"></i>
        </el-menu-item>
        <el-menu-item index="4" @click="selectMenu('setting')">
          <i class="el-icon-setting"></i>
        </el-menu-item>
        <el-menu-item index="5" @click="selectMenu('more')">
          <i class="el-icon-more"></i>
        </el-menu-item>
      </el-menu>
    </div>

    <ChatSession v-if="activeTab === 'ChatPage'"  :user-info="currentChatUser"></ChatSession>
    <FriendList v-else-if="activeTab === 'FriendListPage'" @go-chat="handleGoChat"></FriendList>
  </div>

</template>

<script>

import ChatSession from '../components/Chat/ChatPage';
import FriendList from '../components/Chat/FriendListPage';

export default {
  name: 'ChatSystemAdjusted',
  components: {
    ChatSession,
    FriendList,
  },
  data() {
    return {
      activeTab: 'ChatPage',
      activeMenuIndex: '1',
      currentChatUser: {}
    };
  },
  methods: {
    handleChildEvent(msg) {
      this.activeTab = msg;
      console.log("@@@handleChildEvent",this.activeTab)
    },
    selectMenu(msg){
      this.activeTab = msg;
      this.activeMenuIndex = this.activeTab === 'ChatPage' ? '1' : '2'
    },
    handleGoChat(selectedUser){
      this.activeTab = 'ChatPage'
      this.activeMenuIndex = '1'
      this.currentChatUser = selectedUser
    }
  },
};
</script>

<style scoped>
.chat-system-container {
  height: 92vh;
  display: flex;
}

.sidebar {
  width: 60px;
  background-color: #2c2f33;
}

</style>
